<template>
  <h1>完整对象：{{ obj }}</h1>
  <button @click="obj.age++">点击年龄+1</button>
  <button @click="obj.name += '陈嘉丽我爱你'">点击名字加文字</button>
  <button @click="obj.cp.age++">点击cp年龄加+</button>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  setup() {
    const obj = reactive({
      name: '小白兔',
      age: 20,
      cp: {
        name: '陈嘉丽',
        age: 20,
      },
    });

    // 侦听器，写法1
    // watch(obj, () => {
    //   console.log('obj发生改变啦');
    //   localStorage.setItem('obj', JSON.stringify(obj));
    // });

    // 侦听器，写法2，第一个参数需要传递一个函数形式
    watch(
      () => obj.age,
      () => {
        console.log('我的年龄发生改变啦');
      }
    );

    // 侦听器，写法3，第一个参数需要传递一个函数形式，第三个参数的一个配置项（deep,immediate）
    watch(
      () => obj.cp.age,
      () => {
        console.log('我发生改变啦');
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return { obj };
  },
};
</script>
